<template>
  <div class="all">
    <div class="container6">

      <div class="title">
        故障信息维护

        <el-button type="danger" style="float: right; margin-left: 10px;" icon="el-icon-delete"
          @click="visiable = true; getDeleteInformation()" disabled v-if="statep.statep.roles == 'admin'">批量删除</el-button>

        <el-button type="danger" style="float: right;" icon="el-icon-delete"
          @click=" visiable = true; getDeleteInformation() " v-if=" statep.statep.roles == 'admin' ">回收站</el-button>
      </div>

      <div>
        <div class="block page">
          <el-pagination @size-change=" handleSizeChange " @current-change=" handleCurrentChange "
            :current-page=" params.page " :page-sizes=" [10, 20, 30, 40, 50] " :page-size=" params.page_size "
            layout="total, sizes, prev, pager, next, jumper" :total=" total ">
          </el-pagination>
        </div>
        <div>
          <el-input placeholder="请输入重大故障、负责人、记录人，进行搜索" @change=" getInformationsList() " prefix-icon="el-icon-search"
            v-model=" params.search ">
          </el-input>
        </div>
        <el-table :data=" tableData " border style="width: 100%;"
          :default-sort=" { prop: ['record_time', 'occure_time', 'person_record', 'person_responsibility'] } ">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="number" label="机组">
          </el-table-column>
          <el-table-column prop="shortage" label="重大故障">
          </el-table-column>
          <el-table-column prop="record_time" label="记录时间" sortable>
          </el-table-column>
          <el-table-column prop="person_record" label="记录人" sortable>
          </el-table-column>
          <el-table-column prop="occure_time" label="发生时间" sortable>
          </el-table-column>
          <el-table-column prop="person_responsibility" label="负责人" sortable>
          </el-table-column>
          <el-table-column prop="detail" label="具体情况">
          </el-table-column>
          <el-table-column prop="cause" label="产生原因">
          </el-table-column>
          <el-table-column prop="option" label="应对措施">
          </el-table-column>
          <el-table-column prop="condition" label="执行情况">
          </el-table-column>
          <el-table-column fixed="right" label="操作" v-if=" statep.statep.roles == 'admin' ">
            <template slot-scope="scope">
              <el-button type="text" size="small"
                @click=" dialogFormVisible = true; informationForm = scope.row ">编辑</el-button>
              <el-popover placement="top" width="160" trigger="click">
                <p>确定删除这条数据吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button @click=" deleteInformation(scope.row); visible = false ">确定</el-button>
                </div>
                <el-button slot="reference" style="color:red; margin-left: 12px;" type="text" size="small">删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div>
        <el-dialog title="故障信息回收站" :visible.sync=" visiable ">
          <div>
            <div class="block page">
              <el-pagination @size-change=" dehandleSizeChange " @current-change=" dehandleCurrentChange "
                :current-page=" deparams.page " :page-sizes=" [10, 20, 30, 40, 50] " :page-size=" deparams.page_size "
                layout="total, sizes, prev, pager, next, jumper" :total=" detotal ">
              </el-pagination>
            </div>
            <div>
              <el-input placeholder="请输入重大故障、负责人、记录人，进行搜索" @change=" getInformationsList() " prefix-icon="el-icon-search"
                v-model=" deparams.search ">
              </el-input>
            </div>
          </div>

          <el-table ref="multipleTable" :data=" deleteData " tooltip-effect="dark" style="width: 100%"
            @selection-change=" handleSelectionChange ">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="number" label="机组">
            </el-table-column>
            <el-table-column prop="shortage" label="重大故障">
            </el-table-column>
            <el-table-column prop="record_time" label="记录时间" sortable>
            </el-table-column>
            <el-table-column prop="person_record" label="记录人" sortable>
            </el-table-column>
            <el-table-column prop="detail" label="具体情况">
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px">
            <el-button type="primary" icon="el-icon-refresh-right">恢复数据</el-button>
            <el-button type="danger" icon="el-icon-delete-solid">彻底删除</el-button>
            <el-button @click=" toggleSelection() " icon="el-icon-error" style="float: right;">取消选择</el-button>
          </div>
        </el-dialog>
      </div>



      <div>
        <el-dialog title="编辑故障信息" :visible.sync=" dialogFormVisible ">
          <el-form :model=" informationForm " status-icon ref="informationForm" label-width="100px"
            class="demo-informationForm">
            <el-form-item label="信息id" prop="id">
              <el-input type="text" v-model=" informationForm.id " autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="重大缺陷" prop="shortage">
              <el-input type="text" v-model=" informationForm.shortage " autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="记录时间" prop="record_time">
              <div class="block">
                <el-input type="text" v-model=" informationForm.record_time " autocomplete="off" disabled></el-input>
              </div>
            </el-form-item>
            <el-form-item label="记录人" prop="person_record">
              <el-input type="text" v-model=" informationForm.person_record " autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="发生时间" prop="occure_time">
              <div class="block">
                <el-input type="text" v-model=" informationForm.occure_time " autocomplete="off" disabled></el-input>
              </div>
            </el-form-item>
            <el-form-item label="负责人" prop="person_responsibility">
              <el-input type="text" v-model=" informationForm.person_responsibility " autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="具体情况" prop="detail">
              <el-input type="textarea" v-model=" informationForm.detail " autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="产生原因" prop="cause">
              <el-input type="text" v-model=" informationForm.cause " autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="应对措施" prop="option">
              <el-input type="text" v-model=" informationForm.option " autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="执行情况" prop="condition">
              <el-input type="text" v-model=" informationForm.condition " autocomplete="off"></el-input>
            </el-form-item>


            <el-form-item>

              <el-button type="primary" @click=" updateInformation(); dialogFormVisible = false ">提交</el-button>
              <el-button @click=" dialogFormVisible = false ">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getInformationsList, deleteInformation, updateInformation, getDeleteInformation } from '@/api/table';
import statep from '../../store/modules/user'

export default {
  mounted() {
    this.getInformationsList();
    this.getDeleteInformation();
  },


  methods: {


    handleSizeChange(page_size) {

      this.params.page_size = page_size;
      this.getInformationsList();
    },
    handleCurrentChange(page) {

      this.params.page = page;
      this.getInformationsList();
    },


    dehandleSizeChange(page_size) {

      this.deparams.page_size = page_size;
      this.getInformationsList();
    },
    dehandleCurrentChange(page) {

      this.deparams.page = page;
      this.getDeleteInformation();
    },


    getInformationsList() {
      getInformationsList(this.params).then(response => {
        //console.log(response)
        this.tableData = response.data.results
        console.log(this.tableData);
        this.total = response.data.count
      })
    },

    getDeleteInformation() {
      getDeleteInformation(this.deparams).then(response => {

        this.deleteData = response.data.results;
        this.detotal = response.data.count
      })
    },

    deleteInformation(row) {
      deleteInformation(row.id).then(response => {
        this.getInformationsList();
      })
    },

    updateInformation(id) {
      var id = this.informationForm.id
      updateInformation(id, this.informationForm).then(response => {
        this.getInformationsList()
      })
    },


    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }

  },

  data() {
    return {
      tableData: [],
      informationForm: {
        id: '',
        shortage: '',
        detail: '',
        occure_time: '',
        cause: '',
        option: '',
        person_responsibility: '',
        person_record: '',
        record_time: '',
        condition: '',
        is_delete: false,
      },
      dialogFormVisible: false,
      params: {
        'page': 1,
        'page_size': 10,
        'search': '',
      },
      deparams: {
        'page': 1,
        'page_size': 10,
        'search': '',
      },
      detotal: 0,
      total: 0,
      statep,
      visiable: false,
      deleteData: [],
      multipleSelection: []
    }
  },
}
</script>

<style scoped>
.container6 {
  width: 90%;
  margin-top: 1%;
  margin-left: 5%;
}



.title {
  text-align: center;
  color: rgb(65, 66, 66);
  font-weight: bolder;
  font-size: 300%;
  font-family: "KaiTi";
  border-bottom: 1px solid rgb(80, 80, 80);
}

.all {
  background-color: rgb(243, 243, 243);
  min-height: 94.8vh;
  padding-top: 1%;
}
</style>